<template>
  <!-- <div class="login">
    <div class="entirety_div">
      <h2 class="title">平台登录</h2>
      <div class="div_input">
        <el-input placeholder="账号" class="elem_input" v-model="input1"> </el-input>
        <el-input placeholder="密码" class="elem_input" v-model="input2"> </el-input>
      </div>
      <div class="auth">
        <el-input size="medium" placeholder="验证码" v-model="input3"> </el-input>
      </div>
      <div class="btn">
        <el-button size="medium" round>登录</el-button>
      </div>
    </div>
  </div> -->
  <div class="login">
    <div class="login_div">
      <h1>平台登陆</h1>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <!-- <el-button class="btn" size="medium" round>登录</el-button> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        phone: "",
        password: "",
      },
      rules: {
        phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var str = `username=${this.ruleForm.phone}&password=${this.ruleForm.password}`;
          this.axios.post("login", str).then((res) => {
            console.log(res);
            if (res.data.meta.status == 200) {
              this.$message(res.data.meta.msg);
              sessionStorage.setItem("token", res.data.data.token);
              sessionStorage.setItem("uname", res.data.data.username);
              this.$router.push("/");
            } else {
              this.$message(res.data.meta.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="scss">
.login {
  background-image: url("../assets/map.jpg");
  margin: 10px;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  .login_div {
    h1 {
      padding: 20px 10px;
    }
    width: 300px;
    height: 380px;
    padding-right: 50px;
    background: white;
    margin: 0 auto;
    position: relative;
    left: 370px;
    top: 30px;
    .el-form-item {
      margin-bottom: 45px;
    }
    .el-input__inner {
      margin-left: -40px;
    }
    .el-form-item__content {
      width: 80%;
    }
    .btn {
      width: 80%;
      height: 10%;
      margin-left: 70px;
    }
  }
}
// .entirety_div {
//   width: 25%;
//   height: 55%;
//   position: fixed;
//   top: 40px;
//   right: 250px;
//   background-color: white;
//   .title {
//     width: 100%;
//     height: 5%;
//     color: #2d2d2d;
//     font-size: 20px;
//     padding: 5px 15px;
//   }
//   .div_input {
//     .elem_input {
//       width: 90%;
//       margin: 20px 15px;
//     }
//   }
//   .auth {
//     .el-input--medium {
//       margin: 15px 15px;
//       width: 40%;
//     }
//   }
//   .btn {
//     width: 100%;
//     height: 20%;
//     .el-button--medium {
//       width: 90%;
//       height: 60%;
//       background-color: #46dea0;
//       margin: 10px 15px;
//     }
//   }
// }
</style>
